<template>
    <component is="a-modal" v-model:visible="visible" width="80%" :title="title" :mask-closable="false"
        :ok-loading="loading" @cancel="close" @before-ok="submit" :ok-text="'提交'">
        <div style="max-height:70vh;overflow-y: hidden;">
        <a-descriptions title="实名信息" bordered :column="4">
            <a-descriptions-item label="会员UID" :span="1">{{ paramsData?.user?.area == 1 ? 'GB' +
                paramsData?.user?.id : paramsData?.user?.id }}</a-descriptions-item>
            <a-descriptions-item label="会员账号" :span="1">{{ paramsData.user?.user_name }}</a-descriptions-item>
            <a-descriptions-item label="真实姓名" :span="1" v-if="paramsData.user?.reg_type == 1">{{ paramsData.name
            }}</a-descriptions-item>
            <a-descriptions-item label="公司名称" :span="1" v-else>{{ paramsData.name
            }}</a-descriptions-item>
            <a-descriptions-item label="类型" :span="1">
                <div v-if="paramsData.user?.reg_type == 1">{{ paramsData.reg_type_text }} ( {{ paramsData.sex_text }} )
                </div>
                <div v-else>{{ paramsData.reg_type_text }}</div>
            </a-descriptions-item>
            <a-descriptions-item label="国籍" :span="1">{{ paramsData.country
            }}</a-descriptions-item>
            <a-descriptions-item label="手机号码" :span="1"> {{ paramsData.mobile
            }}</a-descriptions-item>

            <a-descriptions-item v-if="paramsData.user?.reg_type == 1" label="身分证号码" :span="1">{{ paramsData.number
            }}</a-descriptions-item>
            <a-descriptions-item v-if="paramsData.user?.reg_type == 1" label="户籍地址" :span="1"> {{
                paramsData.census_address
            }}</a-descriptions-item>
            <a-descriptions-item v-if="paramsData.user?.reg_type == 1" label="通讯地址( 回函寄送地)" :span="1">{{
                paramsData.mailing_address
            }}</a-descriptions-item>
            <a-descriptions-item v-if="paramsData.user?.reg_type != 1" label="公司负责人" :span="1">{{
                paramsData.company?.fuzeren
            }}</a-descriptions-item>
            <a-descriptions-item v-if="paramsData.user?.reg_type != 1" label="公司统编" :span="1"> {{
                paramsData.company?.account

            }}</a-descriptions-item>
            <a-descriptions-item v-if="paramsData.user?.reg_type != 1" label="公司地址" :span="1">{{
                paramsData.company?.address
            }}</a-descriptions-item>

            <a-descriptions-item label="推荐人会员编号" :span="1">
                {{ paramsData.tui_acc }}
            </a-descriptions-item>
            <a-descriptions-item label="推荐人姓名" :span="1">
                {{ paramsData.tui_name }}
            </a-descriptions-item>
            <a-descriptions-item label="出生日期" :span="1"> {{ paramsData.birthday }}</a-descriptions-item>
            <a-descriptions-item label="合同签名审核状态" :span="1">{{ paramsData.deal_sign_text
            }}</a-descriptions-item>
            <a-descriptions-item label="合同签名审核备注" :span="1">{{ paramsData.message
            }}</a-descriptions-item>
            <a-descriptions-item label="会员申请合约" :span="1">
                <span @click=" openUrl(paramsData?.sign_url)" style="color: green;cursor: pointer;"
                    v-if="paramsData?.info?.deal_state && paramsData?.info?.deal_state == 3">查看</span>
                <span @click="" style="color: red;cursor: pointer;"
                    v-else-if="paramsData?.info?.deal_state && paramsData?.info?.deal_state == 4">重新合成</span>
                <span @click="" style="color: red;cursor: pointer;" v-else>{{ paramsData.deal_state_text }}</span>
            </a-descriptions-item>
            <a-descriptions-item label="是否为空号" :span="1"><span style="color: red">{{ paramsData.is_kh_text
            }}</span></a-descriptions-item>
        </a-descriptions>
        <div class="photoList">
            <div class="photo" v-if="paramsData?.info?.main_photo">
                <span>身份证正面照</span>
                <a-image class="img" :src="paramsData?.info?.main_photo"></a-image>
            </div>
            <div class="photo" v-if="paramsData?.face_url">
                <span>人脸检测</span>
                <a-image class="img" :src="paramsData?.face_url"></a-image>
            </div>
            <div class="photo" v-if="paramsData?.info?.secondary_photo">
                <span>背面照</span>
                <a-image class="img" :src="paramsData?.info?.secondary_photo"></a-image>
            </div>
            <div class="photo" v-if="paramsData?.info?.passbook_img">
                <span>银行纸本</span>
                <a-image class="img" :src="paramsData?.info?.passbook_img"></a-image>
            </div>
            <div class="photo" v-if="paramsData.company && paramsData.company.photo">
                <span>营业执照</span>
                <a-image class="img" :src="paramsData?.company?.photo"></a-image>
            </div>
            <div class="photo" v-if="paramsData.company && paramsData.company.company_seal">
                <span>公司印章</span>
                <a-image fit="cover" class="img" :src="paramsData?.company?.company_seal"></a-image>
            </div>
            <div class="photo" v-if="paramsData.company && paramsData.company.fuzeren_seal">
                <span>负责人印章</span>
                <a-image  class="img" :src="paramsData?.company?.fuzeren_seal"></a-image>
            </div>
        </div>
        <a-form ref="formRef" :model="formData" :rules="rules" :auto-label-width="true" style="margin-top: 30px;">
            <div v-if="mode == 'check'">
                <a-form-item label="审核状态" field="deal_sign">
                    <sa-radio @change="getChange" v-model="formData.deal_sign" :data="STATE"></sa-radio>
                </a-form-item>
                <a-form-item v-if="formData.deal_sign == 3" label="审核备注" field="deal_message_id">
                    <!-- <sa-checkbox :data="info.deal_message_arr" v-model="formData.deal_message_id"
                        placeholder="审核失败时建议填写" /> -->
                    <a-checkbox-group v-model="formData.deal_message_id">
                        <a-checkbox v-for="(item, index) in info.deal_message_arr" :key="index" :value="item.value">{{ item.title }}</a-checkbox>
                    </a-checkbox-group>
                </a-form-item>
                <a-form-item v-if="formData.deal_message_id.includes(10)" label="其他补充" field="deal_message">
                    <a-input v-model="formData.deal_message" placeholder="请输入" />
                </a-form-item>
                <a-form-item label="操作密码" field="admin_pay_password">
                    <a-input-password v-model="formData.admin_pay_password" placeholder="请输入" />
                </a-form-item>

            </div>
        </a-form>
        <a-table :data="info.log" :stripe="true" :pagination="false" style="margin-top: 20px;">
            <template #columns>
                <a-table-column title="时间" dataIndex="create_time" align="center"></a-table-column>
                <a-table-column title="审核人" dataIndex="admin_name" align="center"></a-table-column>
                <a-table-column title="审核状态" dataIndex="deal_sign_text" align="center"></a-table-column>
                <a-table-column title="备注" dataIndex="message" align="center"></a-table-column>
                <a-table-column title="合约书" dataIndex="create_time" align="center">
                    <template #cell="{ record }">
                        <div v-if="record.sign_url">
                            <a-link type="primary" @click="openUrl(record.sign_url)">查看</a-link>
                        </div>

                    </template>
                </a-table-column>
            </template>

        </a-table>
    </div>
    </component>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { Message } from '@arco-design/web-vue'
import SaRadio from '@cps/sa-radio/index.vue'
import memberApi from '@/api/system/member'
import ENUMS from '@/utils/enums'
import { throttle } from 'lodash'
import tool from '@/utils/tool'
const paramsData = ref({})
const info = ref({})
// 获取角色组列表
const getParams = async () => {
    const { data } = await memberApi.auth_detail_params(formData.id)
    paramsData.value = { ...data.info }
    info.value = { ...data }
    info.value.state = tool.simpleTransformArray(data.state)
    info.value.deal_message_arr = tool.simpleTransformArray(data.deal_message_arr)
    console.log('1', info.value);
}
const emit = defineEmits(['success'])
// 引用定义
const formRef = ref()
const mode = ref('')
const visible = ref(false)
const loading = ref(false)
const roleData = ref([])

let title = computed(() => {
    return (mode.value == 'detail' ? '详情' : '审核')
})
const STATE = [
    { value: 1, title: '待审核' },
    { value: 2, title: '审核通过' },
    { value: 3, title: '审核不通过' },
]
const COST = [
    { value: 0, title: '不退回手续费' },
    { value: 1, title: '要退回手续费' },
]
// 表单信息
const formData = reactive({
    deal_sign: 1,
    deal_message_id: [],
    deal_message: '',
    deal_url: '',
    user_id: '',
    admin_pay_password: '',
    id: ''
})

// 验证规则
const rules = ref({
    deal_message_id: [{ required: true, message: '请选择' }],
    admin_pay_password: [{ required: true, message: '请输入' }],
    deal_sign: [{ required: true, message: '请选择' }],

});
// 打开弹框
const open = async (type, data) => {
    paramsData.value = {}
    mode.value = type
    visible.value = true
    formRef.value.resetFields()
    formData.id = data.id
    formData.user_id = data.user_id
    await initPage()
    await getParams()

}
const getChange = () => {
    formData.deal_message_id = []
    formData.deal_message = ''
}
const openUrl = (URL) => {
    window.open(URL)
}

// 初始化页面数据
const initPage = async () => {
}

// 数据保存
const submit = async (done) => {
    if (mode.value == 'check') {
        const validate = await formRef.value?.validate()
        if (!validate) {
            loading.value = true
            try {
                let data = { ...formData }
                let result = await memberApi.auth_dealApply(data)
                if (result.code === 200) {
                    Message.success('操作成功')
                    emit('success')
                    visible.value = false
                    done(true)
                }
                // 防止连续点击提交
                setTimeout(() => {
                    loading.value = false
                }, 500)
            } catch {
                loading.value = false
            }
        }
        done(false)
    } else {
        done(true)
    }
}

// 关闭弹窗
const close = () => (visible.value = false)

defineExpose({ open })
</script>
<style lang="less" scoped>
.photoList {
    width: 100%;
    max-height: 200px;
    display: flex;
    align-items: center;
    margin-top: 20px;
    justify-content: center;

    .photo {
        width: 180px;
        height: 180px;
        text-align: center;
        color: #5c7cfa;
        border: 1px solid #d9d9d9;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        border-radius: 4px;
        margin-right: 100px;

        .img {
            margin-top: 15px;
            cursor: pointer;
            width:100px;
            height: 140px;
        }
    }
}
</style>
